import React, { Component } from 'react'

export default class Count extends Component {
  state = {
    c: 0,
    msg: 'hello state',
  }

  // handle = () => {
  //   this.setState({
  //     c: this.state.c + 1,
  //     msg: 'xxx',
  //   })
  //   this.setState({
  //     c: this.state.c + 2,
  //   })
  //   this.setState({
  //     c: this.state.c + 3,
  //   })

  //   // 多次连续调用setState会合并成一次,合并之后出现相同的属性,下面的会覆盖上面的
  //   this.setState({
  //     // c: this.state.c + 1,
  //     msg: 'xxx',
  //     // c: this.state.c + 2,
  //     c: this.state.c + 3,
  //   })
  // }

  // handle = () => {
  //   this.setState({
  //     c: this.state.c + 1,
  //     msg: 'xxx',
  //   })
  //   //注意: 如果setState中传入的是函数,则不会合并了
  //   this.setState((state) => {
  //     // 这里接收的state是当前组件最新的state数据
  //     // 上一次数据修改完毕之后,这个函数会被调用
  //     // console.log(state)
  //     return {
  //       c: state.c + 2,
  //     }
  //   })
  // }
  handle = () => {
    this.setState({
      c: this.state.c + 1,
      msg: 'xxx',
    })

    this.setState(
      (state) => {
        // 这里接收的state是当前组件最新的state数据
        // 上一次数据修改完毕之后,这个函数会被调用
        console.log(
          '第一个函数:',
          state,
          document.getElementById('xxx').innerText
        )
        // return {
        //   c: state.c + 2,
        // }
      },
      // setState的第二个参数,就一定是函数(可选的)
      () => {
        //这个函数的触发时机: 当上一次的数据修改完毕,并且页面也渲染完毕才触发
        console.log(
          '第二个函数:',
          this.state,
          document.getElementById('xxx').innerText
        )
      }
    )
  }

  render() {
    return (
      <div>
        <p id="xxx">{this.state.c}</p>
        <p>{this.state.msg}</p>
        <button onClick={this.handle}>+</button>
      </div>
    )
  }
}
